<template>
  <div class="box">
    <el-table
      class="table"
      :data="tableData"
      stripe
      style="width: 100%; color: #fff"
      :header-cell-style="{ background: '#282c34' }"
      :cell-style="cellStyle"
      row-key="index"
      @row-click="(row) => openClick(row)"
      @sort-change="sortChange"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="code" label="代码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="change_rate" label="涨幅" sortable>
        <template #default="{ row }">
          <span>{{ takeDecimal(row.change_rate) + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="last_price" label="现价" sortable />
      <el-table-column prop="turnover" label="成交金额（元）" sortable
        ><template #default="{ row }">
          <span>{{ changeMoney(row.turnover) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total_market_val" label="总市值（元）" sortable
        ><template #default="{ row }">
          <span>{{ changeMoney(row.total_market_val) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="circular_market_val"
        label="流通市值（元）"
        sortable
        ><template #default="{ row }">
          <span>{{ changeMoney(row.circular_market_val) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="turnover_rate" label="换手率" sortable
        ><template #default="{ row }">
          <span>{{ takeDecimal(row.turnover_rate) + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pb_ratio" label="市盈率" sortable
        ><template #default="{ row }">
          <span>{{ takeDecimal(row.pb_ratio) + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-space wrap @click.stop="">
            <el-button
              size="small"
              type="primary"
              v-if="!scope.row?.zx_flag"
              @click="handleClick(scope, 'add')"
              >关注</el-button
            >
            <el-button
              size="small"
              v-if="scope.row?.zx_flag"
              @click="handleClick(scope, 'del')"
              >取消关注</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :pager-count="5"
        @current-change="(e) => plateStocks(e)"
      />
    </div>
  </div>
</template>

<script setup>
import { takeDecimal, changeMoney } from "@/utils/base.js";
import { computed, reactive, onMounted, defineEmits, ref } from "vue";
import { defaultApi } from "@/servers";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const store = useStore();
const router = useRouter();
const tableData = ref([]);
const total = ref(0);
// 搜索推荐
onMounted(() => {
  plateStocks();
});
// 搜索
function plateStocks(page_num = 1, field, sort) {
  defaultApi
    .plateStocks({
      market: "a",
      field,
      sort,
      page_num,
    })
    .then((res) => {
      total.value = res.total;
      // 展示表
      tableData.value = res.data || [];
    });
}
// 查看
function openClick(row) {
  store.commit("system/SET", { key: "code", value: row.code });
  router.push("/RiskWarning");
}
// 关注
function handleClick(scope, opt) {
  const { row } = scope;
  // 关注
  defaultApi
    .opt({
      market: "a",
      code: row.code,
      opt,
    })
    .then((data) => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      scope.row.zx_flag = !scope.row.zx_flag;
    });
}
// 表格行样式
function cellStyle({ row, rowIndex }) {
  if (rowIndex % 2) {
    return { background: "#282c34" };
  } else {
    return { background: "#282c34eb" };
  }
}
function sortChange(e) {
  const { prop, order } = e;
  let sort = null;
  if (order == "descending") sort = "desc";
  else sort = "asc";
  plateStocks(1, prop, sort);
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    background: transparent !important;
    overflow: auto;
  }
  .pagination {
    color: #fff;
    margin: 0 auto;
    ::v-deep .el-pager {
      li {
        color: #fff;
        background: none;
        &.is-active {
          color: #409eff;
        }
        &:hover {
          color: #409eff;
        }
      }
    }
    ::v-deep button {
      color: #fff;
      background: none;
    }
  }
}
</style>